<template>
  <!--积分明细-->
  <div>
    <ul class="header">
      <li>总积分</li>
      <li>{{balance.integral}}</li>
    </ul>
    <div class="divider"></div>
    <p class="title">积分明细</p>
    <ul class="list">
      <li v-for="item in balanceLogList">
        <ul>
          <li>{{item.title}}</li>
          <li>{{item.createDate}}</li>
        </ul>
        <span class="zheng" v-if="item.type==1">+{{item.integral}}</span>
        <span class="zheng" v-if="item.type==2">-{{item.integral}}</span>
        <span class="zheng" v-if="item.type==3">-{{item.integral}}</span>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {userIntegralLog} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'jifenmingxi',
    props: {},
    data() {
      return {
        balanceLogList: [],
        balance:{}
      };
    },
    methods: {
      getUserIntegralLogData(params) {
        userIntegralLog(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.balance = res.object.balance;
            this.balanceLogList = res.object.balanceLogList;
          }
        })
      }
    },
    created() {
      this.getUserIntegralLogData({});
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .header {
    padding: 30px 0 15px;
    li:first-child {
      color: #9b9b8c;
      font-size: 15px;
    }
    li:last-child {
      color: #2f95f0;
      font-size: 55px;
    }
  }

  .divider {
    background-color: #eee;
    height: 10px;
  }

  .title {
    font-size: 18px;
    color: #1f1f1f;
    padding: 10px;
    text-align: left;
  }

  .list > li {
    display: flex;
    text-align: left;
    padding: 10px;
    > ul {
      flex: 0 80%;
      li:first-child {
        font-size: 15px;
        color: #111;
      }
      li:last-child {
        font-size: 12px;
        color: #999;
      }

    }
    > span {
      width: 20%;
      text-align: center;
      font-size: 20px;
    }
    .zheng {
      color: #2f95f0;
    }
    .fu {
      color: #e96774;
    }
  }
</style>
